@import '~@angular/material/theming';

// mixin name will be used in main style.scss
@mixin library-component-theme($theme) {

  // retrieve variables from theme
  // (all possible variables, use only what you really need)
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);

  .list {
    .mat-list-item {
      .avatar {
        background-color: mat-color($background, hover);
        color: mat-color($foreground, disabled-text);
      }
    }
  }

  .wrapper {
    .alphabet {
      ol {
        color: mat-color($foreground, disabled-text);
        li {
          &:hover {
            color: mat-color($foreground, text);
          }
        }
      }
    }
  }

  .select-all, .chip-more, .remove-all {
    color: mat-color($primary, darker-contrast) !important;
    background-color: mat-color($primary, darker) !important;
  }

  .mat-chip-list.full-list {
    background-color: mat-color($background, dialog);
    .mat-chip {
      background-color: mat-color($background, background);
    }
  }

  .mini-player {
    background-color: mat-color($background, background);

    .avatar {
      background-color: mat-color($background, hover);
      color: mat-color($foreground, disabled-text);
    }

    .controls {
      .playPause {
        background-color: mat-color($background, focused-button);
      }
      .next, .previous {
        border: 1px solid mat-color($foreground, divider);
      }
    }
  }

  .player {
    .playlist, .playlist-long {
      .mat-list-item, li {
        color: mat-color($foreground, secondary-text);
        &:not(.status-bar):hover {
          color: mat-color($foreground, text);
          background: mat-color($background, hover);
        }
      }
      .current {
        color: mat-color($primary) !important;
      }
    }
    .playPause, .next, .previous {
      background-color: mat-color($background, focused-button);
    }
    .albumArt {
      color: mat-color($foreground, disabled-text);
    }
  }

  //.status-bar {
  //  color: mat-color($foreground, disabled-text);
  //}

}
